<template>
  <div class="box">
    <div class="header"  v-show='!isPreview'>
      <div class='header_left'>
        <ul>
          <li  @click='goBackToManage'>
            <img src="@/assets/img/editContent/icon-return.png" alt=""> 返回管理界面
          </li>
        </ul>
      </div>
      <div class="header_center">
          {{contentObj.contentName}} <span class="redTip">上传的图片文件，请将文件名正规化以后上传</span>
      </div>
      <div class="header_right">
        <ul>
          <!-- <li @click='preview($event,false)'>预览</li>
          <li @click='preview($event,true)'>小程序预览</li> -->
          <li @click='submit'>保存</li>
          <!-- <li @click='submitAndSync'>保存并同步为模板</li> -->
          <li @click='publish'>发布</li>
        </ul>
      </div>
    </div>
    <div class="mainContent"  @drop='drapOver' draggable="false" @dragover="allowDrop($event)">
      <!-- @drop='drapOver' draggable="false" @dragover="allowDrop($event)" -->
      <div class="leftBox" v-show='!isPreview' >
        <div class="left_title">组件库</div>
        <ul class="components_box">
          <li v-for='(item,index) in jsonData' :key='index'>
            <div @mouseenter="enter(index)" 
              @mouseleave="leave()"  :componentType="item.type" :class="[{'activeComponent':activeComponentLi===index},{'hoverComponent':hoverLi===index}]"   @mousedown="activeComponentLi=index"  @mouseup="activeComponentLi=null" class="textDrag" aria-selected="true" draggable="true"  @dragstart='dragStart($event,index)'>
              <img v-if='activeComponentLi===index' draggable="false" :src="item.activeIcon" alt="">
              <img  v-else-if="hoverLi===index && activeComponentLi!==index" :src="item.hoverIcon" alt="">
              <img v-else :src="item.icon" alt="">
              <span draggable="false" >{{item.moduleName}}</span>
            </div>
          </li>
        </ul>
      </div>
        <div  class="screenBox" :class="{'previewBox':isPreview}">
          <div class="dragUl"  @drop='drapEnd' draggable="false" @dragover="allowDrop($event)">
            <div class="overUlbox"></div>
            <div class="scrollUl" >
              <ul class="overUl">
                <li   aria-selected="true" class="dragLiBox"  @click='clickLi($event,index)' @dragleave='dragleave($event,index)' :draggable="activeLi===index" :class="[{'fixedCenter':item.type=='Floatwin'},{'hoverLi':enterOverLi===index},{'fixedBottom':item.type=='BottomFloat'}]"  @dragenter='dragEnter($event,index)'   @drop="drapChildEnd($event,index)"  @dragstart='childDragStart($event,index)' @dragover="allowDrop($event)" :key='item.id' v-for='(item,index) in list' >
                  <!-- 轮播图 -->
                  <c-carousel    v-if='item.type=="Carousel"' :option='item'></c-carousel>
                  <!-- 单张图 -->
                  <c-oneimg   v-if='item.type=="OneImg"' :option='item'></c-oneimg>
                  <!-- 图片导航 -->
                  <c-imgnav v-if='item.type=="ImgNav"' :option='item'></c-imgnav>
                  <!-- 文本 -->
                  <c-text  v-if='item.type=="Text"' :option='item'></c-text>
                  <!-- 悬浮窗 -->
                  <c-floatwin v-if='item.type=="Floatwin"' :option='item'></c-floatwin>
                  <!-- 轮播小图 -->
                  <small-banner v-if='item.type=="SmallBanner"' :option='item'></small-banner>
                  <!-- 魔方 -->
                  <c-magic  v-if='item.type=="Magic"' :option='item'></c-magic>
                  <!-- 预约模块 -->
                  <c-order v-if="item.type=='Order'"  :option='item'></c-order>
                  <!-- 底部浮层 -->
                  <c-bottom-float  v-if="item.type=='BottomFloat'" :option='item'></c-bottom-float>
                  <!-- 图上按钮 -->
                  <c-img-button  v-if="item.type=='ImgButton'" :option='item'></c-img-button>
                  <!-- 视频 -->
                  <c-video  v-if="item.type=='Video'" :option='item'></c-video>
                  <!-- 轮播小图 -->
                  <carousel-small v-if="item.type=='CarouselSmall'" :option='item'></carousel-small>


                  <div class="removeBg" v-show='activeLi==index'></div>
                  <div v-show='activeLi==index&&showMenu' class="dragMenu" :class="{'floatWin':item.type=='Floatwin'}" >
                    <ul class="menu_list" >
                        <li @click='goUpStep(index,true)' v-if="item.type!='Floatwin' && item.type!='BottomFloat' ">
                          <img v-if=' index==0 ||( index==1 && list[0].type=="Floatwin")'  src="@/assets/img/editContent/icon-edit-up-not.png" alt="">
                      
                          <img v-else  class="hasImg"  src="@/assets/img/editContent/icon-edit-up-nor.png" alt="">
                        </li>
                        <li @click='goUpStep(index,false)' v-if="item.type!='Floatwin'&& item.type!='BottomFloat'">
                          <img v-if='index==list.length-1'  src="@/assets/img/editContent/icon-edit-down-not.png" alt="">
                          <img v-else class="hasImg" src="@/assets/img/editContent/icon-edit-down-nor.png" alt="">
                        </li>
                        <li @click='deleteRow(index)'>
                          <img  class='hasImg' src="@/assets/img/editContent/icon-edit-delete-nor.png" alt="">
                        </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
             <!-- 组件内部弹窗控制 -->
              <div class="react_model" v-show='visibleDialog'>
                  <div class="react_dialog" @click.self='closeDialog'>
                    <div class="react_content" v-if='dialogObj.url'>
                      <img :src="dialogObj.url"  alt="">
                      <!-- 弹窗按钮 -->
                      <div class="btnBox" v-if='dialogObj.btn'> 
                          <span class="buttonConfig" :style="`color:${dialogObj.btn.textColor};background-color:${dialogObj.btn.btnBgColor}`">{{dialogObj.btn.textContent}}</span>
                      </div>
                    </div>
                  </div>
              </div>
          </div>
        </div>
        <div class="rightEditBox" v-show='!isPreview'>
          <div class="detailBox" v-if='showDetail && list.length'>
              <!-- 右边详情配置 -->
              <div class="detail" >
                  <carrousel-detail v-if='list[activeLi].type=="Carousel"'  :propData='list[activeLi]' @toParent='parentAdd' :totalList='list' @showDialog='showDialog'></carrousel-detail >
                  <oneimg-detail v-if='list[activeLi].type=="OneImg"'  :propData='list[activeLi]' @toParent='parentAdd' :totalList='list' @showDialog='showDialog'></oneimg-detail>
                  <text-detail v-if='list[activeLi].type=="Text"'  :propData='list[activeLi]' @toParent='parentAdd' :totalList='list' @showDialog='showDialog'></text-detail>
                  <floatwin-detail v-if='list[activeLi].type=="Floatwin"' :propData='list[activeLi]' @toParent='parentAdd' :totalList='list' @showDialog='showDialog'></floatwin-detail>
                  <imgnav-detail v-if='list[activeLi].type=="ImgNav"' :propData='list[activeLi]' @toParent='parentAdd' :totalList='list' @showDialog='showDialog'></imgnav-detail>
                  <smallbanner-detail v-if='list[activeLi].type=="SmallBanner"' :propData='list[activeLi]' @toParent='parentAdd' :totalList='list' @showDialog='showDialog'></smallbanner-detail>
                  <magic-detail v-if='list[activeLi].type=="Magic"' :propData='list[activeLi]' @toParent='parentAdd' :totalList='list' @showDialog='showDialog'></magic-detail>
                  <order-detail v-if='list[activeLi].type=="Order"' :propData='list[activeLi]' @toParent='parentAdd' :totalList='list' @showDialog='showDialog'></order-detail>
                  <bottomfloat-detail v-if='list[activeLi].type=="BottomFloat"' :propData='list[activeLi]' @toParent='parentAdd' :totalList='list' @showDialog='showDialog'></bottomfloat-detail>
                  <img-button-detail v-if='list[activeLi].type=="ImgButton"' :propData='list[activeLi]' @toParent='parentAdd' :totalList='list' @showDialog='showDialog'></img-button-detail>
                  <video-detail v-if='list[activeLi].type=="Video"' :propData='list[activeLi]' @toParent='parentAdd' :totalList='list' @showDialog='showDialog'></video-detail>
                  <carousel-small-detail v-if='list[activeLi].type=="CarouselSmall"' :propData='list[activeLi]' @toParent='parentAdd' :totalList='list' @showDialog='showDialog'></carousel-small-detail>
              </div>
          </div>
        </div>
    </div>
    
    <!-- // 预览 -->
    <el-dialog  :visible.sync="previewDialog" class=" addProduct" width='400px'>
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">预览</div>
			</div>
			<div class="previewBox">
				<p class="title">有效期：{{previewData.previewTime}}</p>
				<div ref='qrCode' id='qrCode'  class="qrDiv"></div>
        <div class="wx_img" v-if='wxImgSrc'>
					<img :src="wxImgSrc" alt="">
				</div>
				<p class="explain">
					 使用微信/支付宝/浏览器扫描二维码预览效果
				</p>
				<p  class="explain grayText">或</p>
				<p  class="explain">复制链接到手机预览！</p>
				<div class="link">{{previewData.contentLink}} <span class="blueText" @click='copyContent(previewData.contentLink)'>复制</span></div>
			</div>
		</el-dialog>
  </div>
</template>

<script>
// 组件
import cCarousel from './components/carousel'
import cOneimg from './components/oneImg';
import cText from './components/c-text';
import cFloatwin from './components/c-floatwin'
import cImgnav from './components/c-imgnav'
import smallBanner from './components/small-banner'
import cMagic from './components/magic'
import cOrder from './components/c-order'
import cBottomFloat from './components/cBottomFloat';
import cImgButton from './components/cImgButton';
import buttons from './components/c-buttons';
import cVideo from './components/c-video';
import cDialog from './components/c-dialog';
import carouselSmall from './components/carouseSmall';
// import carouselDetail from './detailComponents/carouselDetail'


//组件详情
import carrouselDetail from './d-components/carrouselDetail';
import oneimgDetail from './d-components/oneImgDetail';
import textDetail from './d-components/textDetail';
import floatwinDetail from './d-components/floatwinDetail'
import imgnavDetail from './d-components/imgnavDetail'
import smallbannerDetail from './d-components/smallBannerDetail'
import magicDetail from './d-components/magicDetail'
import orderDetail from './d-components/orderDetail'
import bottomfloatDetail from './d-components/bottomfloatDetail'
import imgButtonDetail from './d-components/ImgButtonDetail';
import buttonsDetail from './d-components/buttonsDetail';
import videoDetail from './d-components/videoDetail';
import dialogDetail from './d-components/dialogDetail';
import carouselSmallDetail from './d-components/carouseSmallDetail'

// import QRCode from 'qrcodejs2'   // 二维码


import  {jsonData ,initData} from './initData.js';


import { editContent,getContentById , getContentList} from 'api/content'
import {setStore} from '@/utils/store';
export default {
  name: 'editContent',
  components:{
      // 组件
    cCarousel,
    cOneimg,
    cText,
    cFloatwin,
    cImgnav,
    smallBanner,
    cMagic,
    cOrder,
    cBottomFloat,
    cImgButton,
    buttons,
    cVideo,
    cDialog,
    carouselSmall,
    //组件详情
    // carouselDetail,
    carrouselDetail,
    oneimgDetail,
    textDetail,
    floatwinDetail,
    imgnavDetail,
    smallbannerDetail,
    magicDetail,
    orderDetail,
    bottomfloatDetail,
    imgButtonDetail,
    buttonsDetail,
    videoDetail,
    dialogDetail,
    carouselSmallDetail
  },
  computed:{
      
  },
  props: {
    msg: String
  },
  data(){
    return{
      list:[],
      idLength:0,
      activeLi:'',
      activeComponentLi:'', // 拖拽的index
      hoverLi:null, // 靠近的时候的li
      enterOverLi:null, // 拖拽时的靠近元素的index
      childStartLi:null,
      childEndLi:null,
      showMenu:true,
      showDetail:false, //是否显示参数详情；
      jsonData:[],  //左侧模块
      initData:[], //初始化参数配置
      formDataList:[],// 需要保存的对象
      contentObj:{},// 组件内部的信息
      previewData:{},
      previewDialog:false,
      wxImgSrc:'',
      visibleDialog:false, // 弹窗的显示
      dialogObj:{},     // 弹窗img url,
      isPreview:false,
    }
  },
  methods:{
    closeDialog(){
      this.visibleDialog = false;
      this.dialogObj = '';
    },
    // 显示弹窗
    showDialog(val){
      this.visibleDialog = true;
      this.dialogObj = val;
    },
    // 返回中台
    goBackToManage(){
       this.$confirm('是否需要保存已修改内容？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '返回',
          cancelButtonText: '保存并返回'
        })
        .then(() => {
            this.$router.push({
                path:"/contentManage"
            });
          })
        .catch(action => {
            if(action=='cancel'){
              this.submit();
              this.$router.push({
                path:"/contentManage"
              });
            }
            
        });
    },
    // 实现点击复制的功能
		copyContent(val){
			let createInput = document.createElement("input");
			createInput.value = val;
			document.body.appendChild(createInput);
			createInput.select(); // 选择对象
			document.execCommand("Copy"); // 执行浏览器复制命令
			createInput.style.display = "none";
			this.$message({ message: "复制成功", type: "success" });
		},
    // 预览
    preview(e,bool){
      let params  = {
        id:this.$route.query.id,
        contentEditBody:JSON.stringify(this.list)
      }
      if(bool){
        params.isXcx =1;
      }
      this.wxImgSrc = '';
			this.$ajax({
				method: 'put',
				url:`/cms/cmsContentInfo/updateAndPreview`,
        data:params,
        loadShade:true
			}).then(res=>{
				let data = res.data;
				if(data.status == '200'){
          let result = data.result;
          if(bool){ //小程序
            this.previewData = {
              contentLink:`${result.contentXcxLink}?id=${result.id}&isPreview=1`,
              id:result.id,
              previewTime:result.previewTime
            };
						this.wxImgSrc = result.xcxImgUrl;
						this.$nextTick(()=>{
							if(this.$refs.qrCode){
								this.$refs.qrCode.innerHTML = "";
							}
							this.previewDialog  = true;
						})
          }else{
            this.previewData = {
              contentLink:`${result.contentLink}/${result.id}.html?isPreview=1`,
              id:result.id,
              previewTime:result.previewTime
            };
            this.previewDialog =true;
            this.$nextTick(()=>{
              this.$refs.qrCode.innerHTML = "";
              let rowLink = this.previewData.contentLink;
              if(!rowLink){
                return;
              }
              let qrcode = new QRCode(this.$refs.qrCode, {
                width: 177,  
                height: 177,
                colorDark : "#000",
                colorLight : "#fff",
              })
              qrcode.makeCode(rowLink)
            })
          }
				}
			})
    },
    // 保存
    submit(){
      let params  = {
        id:this.$route.query.id,
        contentEditBody:JSON.stringify(this.list)
      }
      editContent(params).then(res=>{
        if(res){
          this.$message.success('保存成功')
        }
      })
    },
    //保存并存为模板
    submitAndSync(){
      let params  = {
        id:this.$route.query.id,
        contentEditBody:JSON.stringify(this.list)
      }
			this.$ajax({
				method: 'put',
				url:`/cms/cmsContentInfo/updateAndSaveTemplate`,
				data:params
			}).then(res=>{
				let data = res.data;
				if(data.status == '200'){
					this.$message({
						message:'保存成功',
						type:'success'
					})
				
				}
			})
    },
    // 发布
    publish(){
       //发布
        this.$confirm('确定发布吗？', '提示', {
        }).then(()=>{
            editContent({
              id:this.$route.query.id,
              contentStatus:2,
            }).then(res=>{
              if(res){
                  this.$message.success('已发布，待审核');
                  // this.getData();
              }
            })
        }).catch(err=>{})
    },
    enter(index){
      this.hoverLi  =index;
    },
    leave(){
      this.hoverLi = null;
    },
    mouseOut(e){
      e.stopPropagation();
      e.preventDefault()
      console.log('离开',e)
    },
    parentAdd(val){
        // 需要重置 才能监听到
        this.list.splice(this.activeLi,1,val);
        console.log(this.list);
        // console.log(JSON.stringify(this.list),this.list)
    },
    submitForm(){
      console.log(this.list);
    },
    changeForm(obj){
      // 需要重置 才能监听到
      delete this.formDataList[this.activeLi][obj.key];
      this.$set(this.formDataList[this.activeLi],obj.key,obj.value);
      // this.formData[obj.key] = obj.value;
      // 需要更改编辑视图
    },
    //改
    goUpStep(index,bool){  //向上 ，向下 bool:true-上 false:下
      let index1,index2;
      if(bool){ //向上
        if(index==0){
          return ;
        }
        index1 = index;
        index2 =  index1-1;
      }else{ //向下
        if(index ==this.list.length-1){
          return;
        }
        index1 = index;
        index2 = index1+1;
      }
      this.list.splice(index2,1,...this.list.splice(index1, 1 , this.list[index2]));
      this.activeLi  = index2;
    },
    // 删
    deleteRow(index){
      // this.showDetail = false;
      this.showDetail = false;
      this.list.splice(index,1);
      setTimeout(()=>{
        this.activeLi =index==0?index:index-1;
        this.showDetail = true;
      },0)
    
    },
    clickLi(ev,index){
      if(this.activeLi === index ){
        this.showMenu = true;
        return ;
      }
      this.showDetail = false;
      this.activeLi=index;
      this.showMenu = true;
      this.$nextTick(()=>{
        this.showDetail = true;
      })
    },
    // 元素拖动到的位置的index
    dragEnter(ev,index){
      // 放置样式过滤掉 侧边栏
      if(this.list[index].type=='Floatwin' || this.list[index].type=='BottomFloat'){
        return;
      }else{
        this.enterOverLi = index;
      }
     
    },
    dragleave(ev,index){
    },
    // 子元素拖动
    childDragStart(ev,index){
      this.showMenu = false;
      this.childStartLi = index;
      ev.target.display='none'
    },
    // 更改放下和拖拽的元素
    changeChildStyle(ev,hasBorder){
      let arrLength = ev.path.length,currentEv;
      currentEv = ev.target;
      if(currentEv.className && currentEv.className.indexOf('dragLi') > 0){ // 当前元素就是目标元素
        if(hasBorder){
          return  currentEv.parentNode.style.borderBottom = '5px solid blue'
        }else{
          return currentEv.parentNode.style.borderBottom = 'none'
        }
      }else{
          for(let i=0;i < arrLength;i++){
            try {
              if(currentEv.parentNode){
                if(!currentEv.parentNode.className || currentEv.parentNode.className.indexOf('dragLi') < 0 ){
                  currentEv = currentEv.parentNode
                }else{
                    if(hasBorder){
                        return  currentEv.parentNode.style.borderBottom = '5px solid blue'
                    }else{
                      return currentEv.parentNode.style.borderBottom = 'none'
                    }
                }
              }
            } catch (error) {
            }
        }
      }
    },
    //子元素之间放下
    drapChildEnd(ev,index){
      ev.preventDefault();
      this.childEndLi = index;
      this.activeComponentLi = '';
      this.showMenu = true;
      this.enterOverLi = null;
      // this.changeChildStyle(ev);
      var type = ev.dataTransfer.getData('parent')
      if(type){
        return ;
      }
      if( this.childStartLi == this.childEndLi){
        return ;
      }
      this.addChildAndEdit();
    },
    addChildAndEdit(){
      let obj = this.list[this.childStartLi]
      if(this.childStartLi > this.childEndLi){
        this.list.splice(this.childStartLi,1);
        this.list.splice(this.childEndLi+1,0,obj)
        this.activeLi = this.childEndLi+1;
      }else{
        this.list.splice(this.childStartLi,1);
        this.list.splice(this.childEndLi,0,obj)
        this.activeLi = this.childEndLi
      }
      this.enterOverLi = null;
      this.childEndLi = null;
      this.childStartLi = null;
      this.$nextTick(()=>{
        this.showDetail = true;
      })
    },
    // 父元素拖动
    dragStart(e,index){
      let type = e.target.getAttribute('componentType');
      e.dataTransfer.setData('parent',type)
    },
    pushChild(type){
      this.showDetail =false;
      let data =this.initData.find(ele => ele.type === type);
      this.list.push({
        ...data,
        id:this.idLength
      })
      this.idLength ++ ;
    },
    // 父元素放下
    drapEnd(e){
      var type = e.dataTransfer.getData('parent')
      this.activeComponentLi = '';
      this.enterOverLi = null;
      if(type!=''){
        if(this.childEndLi !==null){
          let res = this.jugmentIsFloat(type);
          if(res){
            return this.$message.error('请勿重复添加相同限定模块!')
          }
          this.pushChild(type);
          this.childStartLi = this.list.length-1;
          this.addChildAndEdit();
        }else{
          let res = this.jugmentIsFloat(type);
          if(res){
            return this.$message.error('请勿重复添加相同限定模块!')
          }
          this.pushChild(type);
          this.activeLi = this.list.length-1;
          this.$nextTick(()=>{
            this.showDetail = true;
          })
        }
      }
      return;
    },
    // 判断是否是浮窗
    jugmentIsFloat(type){
      let data =this.initData.find(ele => ele.type === type);
      if(data.type=='Floatwin' ){
        let searchObj = this.list.find(el=>el.type=='Floatwin')
        if(searchObj){
          return true;
        }else{
          return false;
        }
      }else if(data.type=='BottomFloat'){
        let searchObj = this.list.find(el=>el.type=='BottomFloat')
        if(searchObj){
          return true;
        }else{
          return false;
        }
      }else if(data.type=='Order'){
        let searchObj = this.list.find(el=>el.type=='Order')
        if(searchObj){
          return true;
        }else{
          return false;
        }
      }
      else{
        return false;
      }
    },
    //允许放下
    allowDrop(e){
      e.stopPropagation();
      e.preventDefault()
    },
    drapOver(){
      this.enterOverLi = null;
      this.activeComponentLi =null;
    },
    // 获取上次编辑的内容，或者新增的内容；
    getContent(){
      let that  =this;
      let id = this.$route.query.id;
      if(!id){
        this.$message.error('id不存在，请重试');
        // return this.goBackToManage()   
      }
      
      getContentById({id:this.$route.query.id}).then(data=>{
        if(data){
          this.contentObj = JSON.parse(JSON.stringify(data));
          // console.log(this.contentObj,'----==-=--=-')
          if(data.contentEditBody){
            let list = JSON.parse(data.contentEditBody),arr=[];
            if(data.contentStatus == 'FINISH'){ //发布以后屏蔽事件
              list.map((val,index)=>{
                  let obj = val;
                  obj.id = index;
                  if(obj.event){
                    obj.eventChecked = true;
                  }
                  if(obj.btnList && obj.btnList.length){
                    obj.btnList.map((vals)=>{
                      if(vals.event){
                        vals.eventChecked = true;
                      }
                    })
                  }
                arr.push(obj)
              })
              that.list = arr;
            }else{
              list.map((val,index)=>{
                let obj = val;
                if(obj){
                  obj.id = index;
                  arr.push(obj)
                }
              })
              that.list = arr;
            }
            ///注意     ： id 必须唯一否则删除或者替换位置，数据不更新  因为前面用了v-for 
            that.idLength  = list.length;
            that.$nextTick(()=>{
              that.activeLi  = 0;
              that.showDetail = true;
            })
          } 
         }
      })

      // this.$ajax({
      //   method:'get',
      //   url:`/cms/cmsContentInfo/${id}`,
      //   loadShade:true
      // }).then(res=>{
      //   if(res.data.status==200){
      //     let data = res.data.result;
      //     this.contentObj = JSON.parse(JSON.stringify(data));
      //     // console.log(this.contentObj,'----==-=--=-')
      //     if(data.contentEditBody){
      //       let list = JSON.parse(data.contentEditBody),arr=[];
      //       if(data.contentStatus == 'FINISH'){ //发布以后屏蔽事件
      //         list.map((val,index)=>{
      //             let obj = val;
      //             obj.id = index;
      //             if(obj.event){
      //               obj.eventChecked = true;
      //             }
      //             if(obj.btnList && obj.btnList.length){
      //                obj.btnList.map((vals)=>{
      //                  if(vals.event){
      //                   vals.eventChecked = true;
      //                  }
      //                })
      //             }
      //           arr.push(obj)
      //         })
      //         that.list = arr;
      //       }else{
      //         list.map((val,index)=>{
      //           let obj = val;
      //           if(obj){
      //             obj.id = index;
      //             arr.push(obj)
      //           }
      //         })
      //         that.list = arr;
      //       }
      //       ///注意     ： id 必须唯一否则删除或者替换位置，数据不更新  因为前面用了v-for 
      //       that.idLength  = list.length;
      //       that.$nextTick(()=>{
      //         that.activeLi  = 0;
      //         that.showDetail = true;
      //       })
      //     } 
      //   }
      // })
    },
   
  },
  mounted(){
    this.jsonData = jsonData;
    this.initData = initData;
    this.isPreview = this.$route.query.preview ? true : false
    /// 初始化数据
    this.getContent();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
  .box{
      width:100%;
      position:absolute;
      height:100%;
      overflow: auto;
      background:#eeeeee;
      .header{
        width:100%;
        height:56px;
        line-height: 56px;
        font-size: 14px;
        text-align: center;
        background-color:#ffffff;
        border-bottom:1px solid #E4E4E4;
        box-shadow: 0px 0px 10px 0px rgba(126, 107, 90, 0.16);
        box-sizing: border-box;
        position:relative;
        .header_left{
          float:left;
          width:200px;
          ul{
            width:100%;
            text-align:left;
            padding:0 20px;
            li{
              display:inline-block;
              cursor: pointer;
            }
          }
        }
        .header_center{
          margin: 0 440px 0 200px;
          padding-left: 74px;
        }
        .header_right{
          position:absolute;
          right:0;
          top:0;
          width:440px;
          ul{
            width:100%;
            text-align:right;
            li{
              display:inline-block;
              padding:0 24px;
              font-size: 14px;
              box-sizing: border-box;
              border-left:1px solid #E4E4E4;
              color:#333333;
              cursor: pointer;
            }
            li:nth-child(4){
              padding: 0 44px;
              font-size:16px;
              color:#ffffff;
              background:#FF8244;
            }
          }
        }
      }
      .mainContent{
        width:100%;
        height:calc(100% - 56px);
        position:relative;
        border-top:1px solid #E4E4E4;
        box-sizing: border-box;
        .leftBox{
          width:200px;
          height:100%;
          float:left;
          background:#ffffff;
          box-sizing: border-box;
          font-size: 12px;
          color:#666666;
          box-shadow: 0px 0px 10px 0px rgba(126, 107, 90, 0.16);
          .left_title{
            width:100%;
            height:40px;
            line-height:40px;
            font-size: 14px;
            color: #999999;
            border-bottom:1px solid #E4E4E4;
            padding-left: 30px;
            box-sizing:border-box;
          }
          .components_box{
            width:100%;
            padding:7px 20px;
            box-sizing:border-box;
          }
          li{
            width:80px;
            height:80px;
            line-height:80px;
            float:left;
            cursor: move;
            img{
              width:32px;
            }
          }
         
        }
        .screenBox{
          width:calc(100% - 520px);
          height:calc(100% - 20px);
          position:relative;
          margin-left: 200px;
          overflow: auto;
          user-select: none;
          .dragUl{
            width:425px;
            // min-height:100%;
            min-height:567px;
            height:auto;
            margin:40px auto;
            overflow: hidden;
            position:relative;
            padding-bottom:100px;
            // 这个padding用于外边框
            padding-left:5px;
            .react_model{
              width:385px;
              height:100%;
              position:absolute;
              z-index:200;
              top:0;
              left:0;
              background:rgba(0,0,0,0.5);
              .react_dialog{
                position:fixed;
                height:667px;
                width:385px;
                top:100px;
                display:flex;
                justify-content: center;
                align-items: center;
                .react_content{
                  background:#ffffff;
                  width:80%;
                  height:auto;
                  min-height:100px;
                  border-radius:4px;
                  padding:10px;
                  position:relative;
                  img{
                    width:100%;
                    height:auto;
                  }
                  .btnBox{
                    width:100%;
                    height:40px;
                    position:absolute;
                    bottom:25px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    .buttonConfig{
                      line-height: 40px;
                      width:55%;
                      display:inline-block;
                      border-radius: 2px;
                      box-shadow: 2px 2px 8px 0 #999;
                      font-size: 14px;
                    }
                  }
                  
                }
              }
            }
            .overUlbox{
              width:375px;
              // height:100%;
              min-height:500px;
              position: absolute;
              top: 0;
              left:5px;
              right:50px;
              bottom:0;
              margin:auto;
              background:#ffffff;
              box-shadow: 0px 0px 5px rgba(126, 107, 90, 0.16);
            }
            .scrollUl{
              width:375px;
              height:100%;
              min-height:500px;
              // padding-left:70px;
              // padding-right:50px;
            }
            .overUl{
              width:100%;
              min-height:500px;
              height:auto;
            }
            
            .dragLiBox{
              width:100%;
              height:auto;
              position:relative;
              .dragLi{
                width:100%;
                height:auto;
              }
              .removeBg{
                width:calc(100% + 4px);
                height:100%;
                position:absolute;
                z-index: 100;
                // background:blue;
                // opacity: 0.1;
                border:2px solid #FF8244;
                box-sizing: border-box;
                top:0;
                left:-2px;
              }
            }
            //悬浮窗
            .fixedCenter{
              width:60px;
              position:fixed;
              top:450px;
              z-index: 200;
              right:calc(50% - 102px);
              // right:calc(50% - 75px);
            }
            .fixedBottom{
              width:375px;
              height:auto;
              position: absolute;;
              bottom:0;
              z-index: 200;
              .dragMenu{
                top: -40px;
                .menu_list{
                  height:40px;
                }
              }
              // right:calc(50% - 102px);
            }
          }
        }
        .previewBox{
          width:auto;
          min-width:375px;
          margin-left:auto;
          height:calc(100% - 20px);
        }
        .rightEditBox{
          width:320px;
          // margin-left: 200px;
          height:100%;
          position: absolute;
          background:#ffffff;
          right:0;
          top: 0;
          box-shadow: 0px 0px 10px 0px rgba(126, 107, 90, 0.16);
          .detailBox{
              width:100%;
              height:100%;
              overflow: auto;
              .detail_header{
                  width:calc(100% - 40px);
                  padding: 0 20px;
                  height:50px;
                  line-height:50px;
                  display:flex;
                  justify-content: space-between;
                  align-items: center;
              }
              .submitForm_btns{
                width:100%;
                height:100px;
                display:flex;
                justify-content: center;
                align-items: center;
                span{
                  display:inline-block;
                  width:100px;
                  height:30px;
                  text-align:center;
                  line-height: 30px;
                  color:#ffffff;
                }
              }
          }
        }
      }
  }
  .dragMenu{
    width:50px;
    height:108px;
    position:absolute;
    top:0;
    right:-50px;
    z-index: 10;
    .menu_list{
      width:40px;
      margin-left: 10px;
      background:#666666;
      height: 100%;
      overflow:hidden;
      padding:3px;
      box-sizing: border-box;
      border-radius: 4px;
      li{
        width:100%;
        height:34px;
        display:flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        img{
          padding: 5px 7px;
          border-radius: 2px;
        }
      }
      li:hover{
        .hasImg{
          background: #898989
        }
      }
    }
  }
  .floatWin{
    height:40px;
  }
  .textDrag{
    width:100%;
    height:100%;
    text-align:center;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height:12px;
    img{
      width:24px;
      // height:24px;
      margin-bottom:12px;
    }
  }
  
  .hoverComponent{
    color:#FF8244;
  }
  .activeComponent{
    background:#FF8244;
    color:#ffffff;
  }
  .hoverLi{
    margin-bottom:40px;
  }
  .hoverLi::after{
    content: " ";
    color: blue;
    position: absolute;;
    bottom: -40px;
    line-height:40px;
    background:url('~@/assets/img/editContent/pic-position.png') no-repeat;
    display:inline-block;
    text-align: center;
    width:100%;
    height:40px;
  }

  /*设置滚动条样式*/
.detailBox::-webkit-scrollbar, .screenBox::-webkit-scrollbar{
    width: 6px;     
    height: 1px;  
}
.detailBox::-webkit-scrollbar-thumb,.screenBox::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: #ccc;
}
.detailBox::-webkit-scrollbar-track,.screenBox::-webkit-scrollbar-track{/*滚动条里面轨道*/
    border-radius: 1px;
    background: #fff;
}
.previewBox{
    width:100%;
    height:100%;
    overflow: hidden;
    text-align: center;
    .title{
        font-size: 16px;
        color: #666666; 
        margin:30px 0 16px 0;
    }
    .explain{
        font-size: 14px;
        color: #222222;
        // margin: 20px 0 10px 0 ;
        line-height:30px;   
    }
    .grayText{
        color:#666666;
    }
    .link{
        color: #98816B;
        font-size: 14px;
        line-height: 20px;
        margin-bottom:27px;
        .blueText{
            color:#438DF2;
            font-size: 14px;
            cursor: pointer;
            margin-left: 17px;
        }
    }
    #qrCode ,.wx_img {
        display: inline-block;
        display: flex;
        justify-content: center;
        margin-bottom:20px;
        img {
            width: 177px;
            height: 177px;
            background-color: #fff; //设置白色背景色
            padding: 6px; // 利用padding的特性，挤出白边
        }
    }
}
</style>
